<template>
  <div id="PhotoList">
    <!-- 筛选查询 -->
    <div id="selectBar">
      <el-input v-model="text" placeholder="请输入图片小标题" clearable style="width: 180px;"></el-input>
      <el-date-picker v-model="time" type="date" placeholder="请选择时间"></el-date-picker>
      <div id="authorityBar">
        <span id="authorityText">私有</span>
        <el-switch v-model="authority" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
      </div>
      <el-select v-model="albumId" placeholder="请选择图片所属相册">
        <el-option v-for="item in albumData" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
      <el-button icon="el-icon-search" class="search" circle @click="search(true)"></el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="photoData" border stripe class="el-table">
      <el-table-column prop="id" label="id" align="center"></el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image :src="GLOBAL.OSSImageUrlRoot + 'PhotoAlbum/' + scope.row.id + '.png'"
            fit="contain" style="height: 80px;"
            :preview-src-list="[GLOBAL.OSSImageUrlRoot + 'PhotoAlbum/' + scope.row.id + '.png']">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="text" label="小标题" align="center"></el-table-column>
      <el-table-column prop="time" label="时间" align="center"></el-table-column>
      <el-table-column label="权限" prop="authority" align="center">
        <template slot-scope="scope">
          {{ scope.row.authority == 0 ? '公开' : '私有' }}
        </template>
      </el-table-column>
      <el-table-column label="相册id" prop="albumId" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button @click="currentEditPhoto = scope.row; photoFormShow = true;" type="primary" icon="el-icon-edit"
            size="mini"></el-button>
          <el-button @click="currentEditPhoto = scope.row; photoDeleteShow = true;" type="primary" icon="el-icon-delete"
            size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <div id="paging">
      <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="pageCurrentChange">
      </el-pagination>
    </div>
    <!-- 删除随笔提示框 -->
    <el-dialog title="提示" :visible.sync="photoDeleteShow" width="30%">
      <span>确定删除该图片么</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="photoDeleteShow = false">取 消</el-button>
        <el-button type="primary" @click="deletePhoto(); photoDeleteShow = false;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑提示框 -->
    <el-dialog title="编辑图片" :visible.sync="photoFormShow">
      <el-form :model="currentEditPhoto" label-position="top">
        <el-form-item>
          <span>id：{{ currentEditPhoto.id }}</span>
        </el-form-item>
        <el-form-item label="图片">
          <el-image :src="GLOBAL.OSSImageUrlRoot + 'PhotoAlbum/' + currentEditPhoto.id + '.png'" fit="contain"
            style="height: 80px;margin-left: 20px;" :preview-src-list="[GLOBAL.OSSImageUrlRoot + 'PhotoAlbum/' + currentEditPhoto.id + '.png']">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-form-item>
        <el-form-item label="小标题">
          <el-input v-model="currentEditPhoto.text" type="input" clearable></el-input>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker type="date" placeholder="选择日期" v-model="currentEditPhoto.time"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <span id="authorityText">私有</span>
          <el-switch v-model="currentEditPhoto.authority" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-select v-model="currentEditPhoto.albumId" placeholder="请选择图片所属相册">
            <el-option v-for="item in albumData" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="photoFormShow = false">取 消</el-button>
        <el-button type="primary" @click="editPhotoUpdate(); photoFormShow = false">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photoData: [], // 照片数据
      albumData: [], // 相册数据
      currentPage: 1, // 当前页
      pageSize: 10, // 页大小
      total: 0, // 总数据数目
      currentEditPhoto: {}, // 当前编辑照片
      photoFormShow: false, // 控制编辑提示框的显示/隐藏
      photoDeleteShow: false, // 控制删除提示框的显示隐藏
      searchOrNot: false, // 是否搜索状态量，用于确定翻页后数据从那个方法得到
      time: '', // 筛选搜索时间
      authority: false, // 筛选搜索权限
      albumId: '', // 筛选搜索相册
      text: '', // 筛选搜索图片小标题
    }
  },
  methods: {
    // 请求获取所有照片数据
    getPhotoData() {
      this.$axios({
        method: 'post',
        url: '/photo/login/getAllPhoto/' + this.currentPage + '/' + this.pageSize,
      }).then(res => {
        res.data.data.data.forEach(element => {
          element.time = element.time.slice(0, 10) // 格式化时间
        });
        this.photoData = res.data.data.data
        this.total = res.data.data.total
      })
    },
    // 请求获取所有相册数据
    getAlbumData() {
      this.$axios({
        method: 'post',
        url: '/album/getAllAlbum'
      }).then(res => {
        this.albumData = res.data
      })
    },
    // 删除图片事件
    deletePhoto() {
      this.$axios({
        method: 'post',
        url: '/photo/login/deletePhoto/' + this.currentEditPhoto.id
      }).then(res => {
        if (res.data) {
          this.$router.go(0) // 刷新页面
          this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: '删除失败，出现错误了X.X',
            type: 'error'
          })
        }
      })
    },
    // 提交更新图片事件
    editPhotoUpdate() {
      if(this.currentEditPhoto.time == '' || this.currentEditPhoto.time == null || this.currentEditPhoto.text == '' || this.currentEditPhoto.text == null) {
        this.$message({
          message: '请完善信息再提交哦~',
          type: 'error',
          showClose: true
        })
        return
      }
      let data = new FormData()
      data.append('id', this.currentEditPhoto.id)
      data.append('text', this.currentEditPhoto.text)
      data.append('albumId', this.currentEditPhoto.albumId)
      data.append('authority', this.currentEditPhoto.authority ? 1 : 0)
      data.append('time', new Date(this.currentEditPhoto.time))
      this.$axios({
        method: 'post',
        url: '/photo/login/updatePhoto',
        data: data,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      }).then(res => {
        if (res.data) {
          this.$router.go(0) // 刷新页面
          this.$message({
            showClose: true,
            message: '提交成功',
            type: 'success'
          })
        } else {
          this.$message({
            showClose: true,
            message: '提交失败，出现错误了X.X',
            type: 'error'
          })
        }
      })
    },
    // 当element ui 的页数改变，同步页数
    pageCurrentChange(val) {
      this.currentPage = val // 更改当前页
      if (this.searchOrNot) { // 若搜索过，就用筛选搜索的方式查询数据
        this.search(false)
        return
      }
      this.getPhotoData() // 默认，请求所有数据
    },
    // 筛选搜索
    search(buttonSearchOrNot) {
      if (buttonSearchOrNot) { // 若为按钮点击搜索,重设页状态
        this.currentPage = 1
        this.total = 0
      }
      this.searchOrNot = true // 改变搜索状态量
      // 准备数据，发送请求
      let data = new FormData()
      if(this.text != '' && this.text != null) data.append('text',this.text)
      if(this.authority != '' && this.authority != null) data.append('authority',this.authority ? 1 : 0)
      if(this.albumId != '' && this.albumId != null) data.append('albumId',this.albumId)
      if(this.time != '' && this.time != null) data.append('time',this.time)
      this.$axios({
        method: 'post',
        url: '/photo/login/selectSearch/' + this.currentPage + '/' + this.pageSize,
        data: data,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        res.data.data.data.forEach(element => { // 格式化文章时间
          element.time = element.time.slice(0, 10)
        });
        this.photoData = res.data.data.data
        this.total = res.data.data.total
      })

    }
  },
  mounted() {
    this.getPhotoData()
    this.getAlbumData()
  }
}
</script>

<style lang="scss" scoped>
#selectBar {
  margin: 20px auto;
  display: flex;
  justify-content: center;
}

#authorityBar {
  margin: auto 20px;
}

#authorityText {
  margin-right: 10px;
}
</style>
<style scoped="scoped">
/* 筛选框 */
#selectBar .el-date-editor.el-input,
#selectBar .el-select {
  margin: auto 20px;
}

/deep/#selectBar .el-input__inner {
  background-color: #202020;
  color: #fff;
}

/deep/#selectBar #el_input {
  background-color: #fff;
}

.search {
  background-color: #202020;
  color: #fff;
}
/* 表格 */
.el-table {
  width: 80%;
  margin: 0 auto;
  border-radius: 20px;
}

.el-table__row {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table--border {
  border-color: #464646;
}

/deep/.el-table th.el-table__cell.is-leaf {
  border-color: #464646;
}

/deep/ .el-table thead tr>th {
  background-color: #202020 !important;
  color: #464646;
  border-color: #464646;
}

/deep/ .el-table tbody tr>td {
  background-color: #202020 !important;
  border-color: #464646;
}

/deep/.el-table::before,
/deep/.el-table__fixed-right::before {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table__empty-block {
  background-color: #202020;
}

.cell .el-button--primary {
  margin-bottom: 10px;
}
/deep/.el-table__body-wrapper {
    border-bottom: .5px solid;
}
/* 分页 */

/deep/.el-pagination {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  color: #202020;
}

/deep/.el-pagination button {
  color: #fff;
  background-color: #202020;
}

/deep/ .el-pager li.active {
  color: rgb(255, 150, 50);
}

/deep/ .number {
  color: #fff;
}

/deep/ .number:hover {
  color: rgb(255, 150, 50);
}

/deep/.el-pager li {
  background-color: #202020;
}
</style>